import React, { useState, useEffect } from 'react';
import { Card, Row, Col, Statistic, List, Avatar, Tag } from 'antd';
import {
  UserOutlined,
  ShoppingCartOutlined,
  FileTextOutlined,
  ShoppingOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
} from '@ant-design/icons';
import { DashboardApi, StatsData, ActivityItem } from './server';
import './index.less';

/**
 * 仪表盘内容组件 - 不包含布局
 */
export const DashboardContent: React.FC = () => {
  // 统计数据
  const [stats, setStats] = useState<StatsData>({
    users: 0,
    orders: 0,
    products: 0,
    articles: 0,
  });

  // 最近活动
  const [activities, setActivities] = useState<ActivityItem[]>([]);

  // 获取统计数据
  useEffect(() => {
    const fetchStats = async () => {
      try {
        const result = await DashboardApi.getStats();
        setStats(result);
      } catch (error) {
        console.error('获取统计数据失败', error);
      }
    };

    fetchStats();
  }, []);

  // 获取最近活动
  useEffect(() => {
    const fetchActivities = async () => {
      try {
        const result = await DashboardApi.getActivities();
        setActivities(result);
      } catch (error) {
        console.error('获取最近活动失败', error);
      }
    };

    fetchActivities();
  }, []);

  return (
    <div className="dashboard-container">
      <h2 className="page-title">仪表盘</h2>

      {/* 统计卡片 */}
      <Row gutter={16} className="stats-row">
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="用户总数"
              value={stats.users}
              prefix={<UserOutlined />}
              suffix={
                <Tag color="green">
                  <ArrowUpOutlined /> 12%
                </Tag>
              }
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="订单总数"
              value={stats.orders}
              prefix={<ShoppingCartOutlined />}
              suffix={
                <Tag color="green">
                  <ArrowUpOutlined /> 8%
                </Tag>
              }
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="商品总数"
              value={stats.products}
              prefix={<ShoppingOutlined />}
              suffix={
                <Tag color="green">
                  <ArrowUpOutlined /> 5%
                </Tag>
              }
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="文章总数"
              value={stats.articles}
              prefix={<FileTextOutlined />}
              suffix={
                <Tag color="red">
                  <ArrowDownOutlined /> 3%
                </Tag>
              }
            />
          </Card>
        </Col>
      </Row>

      {/* 最近活动 */}
      <Card title="最近活动" className="activity-card">
        <List
          itemLayout="horizontal"
          dataSource={activities}
          renderItem={(item: ActivityItem) => (
            <List.Item>
              <List.Item.Meta
                avatar={<Avatar src={item.avatar} />}
                title={item.title}
                description={item.description}
              />
              <div>{item.time}</div>
            </List.Item>
          )}
        />
      </Card>
    </div>
  );
}; 